<template>
  <el-dialog :close-on-click-modal="false" width="1200px" :title="$t('m.confirm')" :visible.sync="dialogVisible" :before-close="close">
    <el-form :inline="true" align="left" ref="aform" :model="form">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('m.notice.noticenumber')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="form.noticenumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-button type="primary" @click="search">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-form v-if="show" align="left" :rules="ruleForm" ref="refForm" :model="formInline">
      <el-divider></el-divider>
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item :label="$t('m.notice.noticenumber')" :label-width="formLabelWidth" prop="arrivalnoticeDto.noticenumber">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.noticenumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.consignor')" :label-width="formLabelWidth" prop="arrivalnoticeDto.consignorname">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.consignorname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.deliverycompany')" :label-width="formLabelWidth">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.deliverycompany" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.contact')" :label-width="formLabelWidth" prop="arrivalnoticeDto.contact">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.contact" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth" prop="arrivalnoticeDto.ordernumber">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.ordernumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.suppliername')" :label-width="formLabelWidth" prop="arrivalnoticeDto.suppliername">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.suppliername" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.platenumber')" :label-width="formLabelWidth" prop="arrivalnoticeDto.platenumber">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.platenumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.planeddate')" :label-width="formLabelWidth" prop="arrivalnoticeDto.planeddate">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.planeddate" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item :label="$t('m.in.warehouse')" :label-width="formLabelWidth" prop="arrivalnoticeDto.warehouseid">
            <el-input disabled size="mini" v-model="$store.state.basicInfo.warehouseInfo.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.typename')" :label-width="formLabelWidth" prop="arrivalnoticeDto.typename">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.typename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.deliveryman')" :label-width="formLabelWidth" prop="arrivalnoticeDto.deliveryman">
            <el-input disabled size="mini" v-model="formInline.arrivalnoticeDto.deliveryman" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('m.remark')" :label-width="formLabelWidth" prop="arrivalnoticeDto.remark">
            <el-input disabled v-model="formInline.arrivalnoticeDto.remark" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="section">
        <template>
          <el-table :data="formInline.arrivalnoticedetailList" border empty-text size="mini">
            <el-table-column :label="$t('m.index')" width="50" align="center">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column label="SKU" width="180" align="center">
              <template slot-scope="scope">
                <el-form-item prop="productspeccode">
                  <el-input disabled maxlength="20" show-word-limit v-model="scope.row.productspeccode" size="mini" required></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="SupplierCode" width="120" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <span :v-model="scope.row.suppliercode">{{scope.row.suppliercode}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.in.productname')" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <span :v-model="scope.row.productname">{{scope.row.productname}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.in.productspec')" align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <span :v-model="scope.row.productspec">{{scope.row.productspec}}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.in.plannedquantity')" align="center">
              <template slot-scope="scope">
                <el-form-item prop="plannedquantity">
                  <el-input disabled maxlength="10" show-word-limit v-model.number="scope.row.plannedquantity" size="mini" required></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('m.in.actual')" align="center">
              <template slot-scope="scope">
                <el-form-item :prop="'arrivalnoticedetailList.' + scope.$index + '.actualquantity'" :rules="ruleForm.num">
                  <el-input @input="limit($event,scope.row)" maxlength="10" show-word-limit v-model.number="scope.row.actualquantity" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
          <el-form-item :label="$t('m.page.temporary')">
            <el-select v-model="tareaid" :placeholder="$t('m.choose')">
              <el-option v-for="item in tarea" :key="item.tsareaid" :label="item.tsareaname" :value="item.tsareaid"></el-option>
            </el-select>
          </el-form-item>
        </template>
      </div>
    </el-form>
    <div class="btns">
      <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
      <el-button size="mini" type="primary" @click="confirm">{{$t('m.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { formValidate } from '@/assets/mixins/rule/type-setting-validate'
export default {
  name:'confirm-popup',
  props:['dialogVisible'],
  mixins:[formValidate],
  data(){
    let onlyNumber = (rule, value, callback) => {
      if (!/^\+?[1-9]\d*$/.test(value)){
        return callback(new Error(this.$t('m.onlynumber')))
      }
      callback()
    }
    return {
      form:{
        noticenumber:''
      },
      ruleForm:{
        num:[
          {
            required:true,
            message:this.$t('m.enter'),
            trigger:'blur'
          },
          { validator:onlyNumber, trigger:'blur' }
        ]
      },
      tarea:[],
      id:null,
      tareaid:null,
      show:false,
      formInline:{},
      formLabelWidth:'140px',
      isdisabled:true,
      islimit:true
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    getTarea(){
      this.$axios({
        method:'get',
        url:`/tsarea/list`,
        params:{
          state:1,
          type:1
        }
      }).then(({ data }) => {
        this.tarea = data
      })
    },
    search(){
      let code = this.form.noticenumber.replace(/\s+/g, '')
      if (code.length > 0){
        this.$axios({
          method:'get',
          url:`/arrivalnotice/noticenumber/${code}`
        }).then(({ data }) => {
          let state = data.arrivalnoticeDto.state
          // 状态(1 待审核 2 不通过 3 已审核 4 待签收 5 部分签收 6已签收)
          if(state === 3){ // 只有已审核状态下，才展示数据
            this.show = true
            this.formInline = data
            this.id = this.formInline.arrivalnoticeDto.arrivalnoticeid
            this.getTarea()
          } else {
            if(state<3) return this.callbackMessage(this.$t('m.in.forbidConfirm1'))
            else return this.callbackMessage(this.$t('m.in.forbidConfirm2'))
          }
        })
      }
    },
    limit(val, row){
      if (row.actualquantity > row.plannedquantity){
        this.isdisabled = true
        this.$message.error(this.$t('m.in.limit'))
      }
    },
    confirm(){
      this.$refs['refForm'].validate(valid => {
        if (valid){
          let arr = this.formInline.arrivalnoticedetailList
          let dataList = []
          this.isdisabled = false
          for (let i = 0;i < arr.length;i++){
            dataList.push({
              actualquantity:arr[i].actualquantity,
              arrivalnoticedetailid:arr[i].arrivalnoticedetailid
            })

            if (arr[i].actualquantity > arr[i].plannedquantity){
              this.isdisabled = true
              return this.$message.error(this.$t('m.in.limit'))
            }
          }
          if (!this.tareaid){
            this.isdisabled = true
            return this.$message.error(
              this.$t('m.choose') + this.$t('m.page.temporary')
            )
          }

          if (this.isdisabled === false){
            let tsareacode = this.tarea.filter(v => {
              return v.tsareaid === this.tareaid
            })[0].tsareacode

            let obj = {
              detailConfirmInputs:dataList,
              tsareacode:tsareacode,
              tsareaid:this.tareaid
            }
            this.$axios({
              method:'put',
              url:`/arrivalnotice/confirm/${this.id}`,
              data:obj
            }).then(() => {
              this.$message.success(this.$t('m.quality.confirmsuccess'))
              this.$emit('close')
              this.$emit('refresh')
            })
          }
        }
      })

    }
  }
}
</script>
<style lang="scss" scoped>
</style>